<template>
  <button @click="state.show=true">
    <slot></slot>
  </button>
  <teleport to="body" v-if="state.show">
    <div class="modalWrapper">
      <button @click="state.show=false">关闭</button>
      <div>这是一个窗口实验,teleport</div>
    </div>

  </teleport>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "ModelButton.vue",
  // props: {
  //   show: {
  //     type: Boolean,
  //     default: false
  //   },
  // },
  setup() {
    const state = reactive({
          show: false
        }
    )
    return{
      state
    }
  }
}
</script>

<style lang="scss" scoped>
.modalWrapper{
  position: absolute;
}
</style>
